<!doctype html >
<html lang="{{ config('app.locale') }}">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, min-scale=1,user-scalable=no">
  <meta name="_token" content="{{ csrf_token() }}"/>


  <link href="{{env('CDN_RESOURCE')}}/css/mobile/feedback/mobile.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.2/weui.min.js"></script>
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">

  {{--<script src="http://qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js"></script>--}}



  <title>久趣英语</title>

</head>
<body>

<div class="finish-class">
  <div class="complete-icon"></div>
  <div class="complete-text">太棒啦！</div>

  <div class="class-detail">
    <div><span id="nickName"></span> 已完成 <span id="level"></span> 级别 <span id="unit"></span> 课程</div>
    <div>本次课程老师为 <span id="teacher"></span></div>
  </div>
</div>

<div class="class-feedback">

  <div class="divider">
    <div class="s-text">课程难易度</div>
    <div class="line"></div>
  </div>

  <div class="select-level">
    <div>太简单</div>
    <div>适中</div>
    <div>太困难</div>
  </div>

  <div class="rate-comment">

    <div class="divider " id="rateDivider">
      <div class="l-text">请您评价本堂课，鼓励我们做得更好</div>
      <div class="line"></div>
    </div>

    <div class="rates">
      <div class="item">
        <label>系统平台</label>
        <div class="star-rate" data-type="1" id="systemRating">
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
        </div>
      </div>

      <div class="item">
        <label>外教授课</label>
        <div class="star-rate" data-type="2" id="teacherRating">
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
          <div class="star dis-star-icon"></div>
        </div>
      </div>

      <div class="tip" id="tip">
        <div class="text">厉害了</div>
        <div class="arrow"></div>
      </div>
    </div>

    <div class="tags" id="tags">
    </div>

    <textarea class="comments" id="comments" placeholder="感觉本课怎么样，都还满意吗？来叨叨几句吧！"></textarea>
    <div class="submit-btn">
      提交
    </div>
    <a href="#" id="share">
      <div class="share-now-btn">分享给好友</div>
    </a>
  </div>

  <div class="reward-mask">

    <div class="reward-notice">
      <img class="bg" src='{{env('CDN_RESOURCE')}}/icon/mobile/feedback/pop_up_bg.png'>
      <div style="position: relative;z-index: 10">
        <div class="reward-icon"></div>
        <div class="title">获得奖学金</div>
        {{--<div class="desc">每次评论后可随机获取一笔奖励金</div>--}}
        <div class="reward-amount"><span class="total"></span> <span class="sign">元</span></div>
        <div class="text">
          <div>已存入奖学金账户</div>
        </div>
        <a href="#">
          <div class="share-btn">
            分享给好友
          </div>
        </a>
      </div>
    </div>

  </div>
  <div class="share-mask">
    <div class="share-arrow"></div>
    {{--<div class="share-text">点击分享给好友 ^ _ ^ </div>--}}
  </div>
</div>

<div id="alertBox" class="alert-box"></div>

<script type="text/javascript" src="https://static-app.97kid.com/wx/js/zepto.min.js"></script>
<!--引入微信js-SDK-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/wx_config.js?v={{config('app.version')}}"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/Zepto_fx_methods.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/mobile/login.js"></script>
<script type="text/javascript" src="{{env('CDN_RESOURCE')}}/js/AV.analytics.js"></script>



<script type="text/javascript">

  (function ($) {


    $(function () {

      var isInWechat = false
      var userAgent = navigator.userAgent
      var wechatInfo = userAgent.match(/MicroMessenger\/([\d\.]+)/i)
      if (wechatInfo) {
        isInWechat = true;
      }
      var wxconfig = null;
      var analytics = AV.analytics({
        appId: 'antYy9lOFi5mkU9QKjtYmRLM-gzGzoHsz',
        appKey: 'jqyWxLyobpsmdwsJddJlDheb',
        channel: isInWechat ? 'weixin' : ''
      });
      var appointmentId = '{{$appointmentId}}';
      analytics.send({
        event: 'feedback-open',
        attr: {
          appointmentId: appointmentId
        }
      });

      if (isInWechat) {
        var configOption = {
          timestamp: '{{$signature['timestamp']}}',
          nonceStr: '{{$signature['nonceStr']}}',
          signature: '{{$signature['signature']}}',
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
        };
        wxconfig = new WxConfig(configOption);
      }

      var starCount = 5
      var rating = 0
      var teacherRating = 0
      var tags = []
      var review = ''
      var difficulty = ''
      var unFeedback = true // true 未评论  , false 已经评论 或者 获取feedback信息出错
      var startips = {
        'system': ['急需改进', '需要改进', '一般', '比较好', '棒极了'],
        'teaching': ['急需改进', '需要改进', '一般', '较好', '棒极了']
      }
      $('.select-level div').click(function () {

        if (unFeedback) {
          $(this).addClass('select').siblings('div').removeClass('select')
          if ($('.rate-comment').css('display') === 'none') {
            $('.rate-comment').show()
          }
          difficulty = $(this).index() + 1
        }
      })

      $('.share-now-btn, .share-btn').click(function(){
        $('.reward-mask').fadeOut();
        $('.share-mask').fadeIn();
        analytics.send({
          event: 'feedback-share-click',
          attr: {
            appointmentId: appointmentId
          }
        });
      });

      $('.share-mask').click(function(){
        $(this).fadeOut();
      })

      $('.star').click(function () {
        if (unFeedback) {
          var type = $(this).parent().attr('data-type')
          var selectStar = $(this).index() + 1

          var starTop = $(this).position().top
          var starLeft = $(this).position().left

          $('#tip').css({'top': starTop - 28, 'left': starLeft - 40}).show()

          setTimeout(function () {
            $('#tip').hide()
          }, 500)

          if (parseInt(type) === 1) {
            rating = selectStar
            $('.tip .text').text(startips.system[selectStar - 1])
          } else {
            teacherRating = selectStar
            $('.tip .text').text(startips.teaching[selectStar - 1])
          }

          for (var i = 0; i < starCount; i++) {
            if (i <= (selectStar - 1)) {

              $(this).parent().find('.star').eq(i).removeClass('dis-start-icon').addClass('star-icon')
            } else {
              $(this).parent().find('.star').eq(i).removeClass('star-icon').addClass(' dis-start-icon')
            }
          }

          $('.tag').each(function () {
            var starType = $(this).attr('data-type')
            var starRange = $(this).attr('data-star').split(',')

            if (starType === type) {
              if ($.inArray(selectStar + '', starRange) !== -1) {
                $(this).show()
              } else {
                $(this).removeClass('select').hide()
              }
            }

          })

          if ($('.comments').css('display') === 'none') {
            $('.comments').css('display', 'block')
            $('.submit-btn').show()
          }
        }
      })

      $('.tag').live('touchend', function () {
        if (unFeedback) {
          var selectedTag = parseInt($(this).attr('data-id'))
          if ($.inArray(selectedTag, tags) !== -1) {
            var pos = tags.indexOf(selectedTag)
            if (pos > -1) {
              tags.splice(pos, 1)
            }

          } else {
            tags.push(selectedTag)
          }
          $(this).toggleClass('select')
        }
      })

      //提交评论
      $('.submit-btn').click(function () {
        if (unFeedback) {
          submitFeedback()
        }
      })

      if (appointmentId === '') {

        $.toastAlert('无效的评价页面')

      } else {

        var account = new Account()

        //account.forceLogin = true;

        account.getUserInfo(function (err, result) {
          if (err) {
            unFeedback = false;
            $.toastAlert(err.message)
          } else {

            wxconfig.activeShare(result.shareFlag, '', {
              title: '【Qkids久趣】4-12岁，在家跟北美外教学英语，新用户100元体验！',
              desc: '严选北美外教在线授课，创造趣味十足的课堂体验，让孩子爱学更有效。',
              link: window.location.protocol + '//' + window.location.host + '/wx?_r=' + result.shareFlag,
              imgUrl: 'https://static-app.97kid.com/site-student/public/img/share.png',
              success: function (target) {
                analytics.send({
                  event: 'feedback-share',
                  attr: {
                    appointmentId: appointmentId,
                    target: target
                  }
                });
              }
            });
            var nickName = result.nickname
            var level = ''
            var unit = ''
            var teacher = ''

            account.ajax({
              type: 'GET',
              path: '/s/appointments/' + appointmentId,
              success: function (data) {
                getFeedbackTag()
                $('#nickName').text(nickName)
                $('#level').text('L' + data.course.level)
                $('#unit').text(data.lesson.name)
                getTeacherInfo(data.teacherId)
              },
              error: function (err) {
                //unFeedback = false;
                $.toastAlert(err.message)
              }
            })

          }
        })

        function getFeedbackTag () {
          account.ajax({
            auth: 'false',
            type: 'GET',
            path: '/s/feedbackTags',
            success: function (data) {
              var tags = ''
              for (index in data) {
                tags += '<div class="tag"   data-id="' + data[index].id + '" data-type="' + data[index].type + '" data-star="' + data[index].displayStar + '"  >' + data[index].name + '</div>'
              }
              $('.tags').append(tags)

              getFeedbackDetail()

            },
            error: function (err) {

              $.toastAlert(err.message)
            }
          })

        }

        function getFeedbackDetail () {
          account.ajax({
            auth: 'false',
            type: 'GET',
            path: '/s/appointments/' + appointmentId + '/feedback',
            success: function (data) {
              rating = data.rating
              teacherRating = data.teacherRating
              tags = data.tags
              review = data.review
              difficulty = data.difficulty

              $('.rate-comment').show()

              //默认选中 难度
              $('.select-level div').eq(difficulty - 1).addClass('select')

              //默认选中 系统评分
              $('#systemRating > div').eq(rating - 1).click()

              //默认选中 老师评分
              $('#teacherRating > div').eq(teacherRating - 1).click()

              //默认选中标签
              $('.tags div').each(function () {
                if ($(this).css('display') === 'block') {
                  var tagId = parseInt($(this).attr('data-id'))
                  if ($.inArray(tagId, tags) !== -1) {
                    $(this).addClass('select')
                  }
                }
              })

              // 默认填充评论框
              $('.comments').val(review).attr('disabled', 'disabled')

              //设置为已经评论
              unFeedback = false

              $('.submit-btn').hide()

              $('.share-now-btn').show()

            },
            error: function (err) {
              //unFeedback = false;
              //$.toastAlert(err.message, 2);
            }
          })
        }

        function getTeacherInfo (teacherId) {
          if (teacherId !== 0) {
            account.ajax({
              type: 'GET',
              path: '/s/teachers/' + teacherId,
              success: function (data) {
                teacher = data.nickname
                $('#teacher').text(teacher)
              },
              error: function (err) {
                $.toastAlert(err.message)
              }
            })

          }
        }

        function submitFeedback () {

          var reviewData = {
            rating: rating,
            teacherRating: teacherRating,
            tags: tags,
            review: $('.comments').val(),
            difficulty: difficulty
          }

          if (!rating) {
            $.toastAlert('请您对系统评分，鼓励我们做得更好', 2)
            return
          }
          if (!teacherRating) {
            $.toastAlert('请您对老师评分，鼓励我们做得更好', 2)
            return
          }

          account.ajax({
            auth: 'false',
            type: 'POST',
            path: '/s/appointments/' + appointmentId + '/feedback',
            data: reviewData,
            success: function (data) {
              $('.total').text(parseFloat(parseInt(data.scholarship) / 100))
              $('.reward-mask').fadeIn()
              analytics.send({
                event: 'feedback-submit',
                attr: {
                  appointmentId: appointmentId
                }
              });
            },
            error: function (err) {
              $.toastAlert(err.message, 2)
            }
          })
        }
      }

    })

  })(window.Zepto)

</script>

</body>
</html>